<template>
    <view class='container'>
        <div>
            <view class='order-tit'>
                <text @click='onStsTap' data-sts="0" :class="sts==0?'on':''">全部</text>
                <text @click='onStsTap' data-sts="1" :class="sts==1?'on':''">待支付</text>
                <text @click='onStsTap' data-sts="2" :class="sts==2?'on':''">待发货</text>
                <text @click='onStsTap' data-sts="3" :class="sts==3?'on':''">待收货</text>
                <text @click='onStsTap' data-sts="5" :class="sts==5?'on':''">已完成</text>
            </view>
            <view class='main'>
                <view class="empty" v-if="records.length==0">
                    还没有任何相关订单
                </view>
                <div v-for="item in records" :key="item.orderNumber">
                    <div class="prod-item">
                        <div class="order-num">
                            <text>订单编号：{{item.orderNumber}}</text>
                            <view class='order-state'>
                                <text class="order-sts" style="color:red">{{item.status==1?'待支付':(item.status==2?'待发货':(item.status==3?'待收货':(item.status==5?'已完成':'已取消')))}}</text>
                                <view class='clear-btn' v-if="item.status==5 || item.status==6">
                                    <image src='../../static/images/icon/clear-his.png' class='clear-list-btn' bindtap='delOrderList' ></image>
                                </view>
                            </view>
                        </div>
                        <div v-if="item.orderItemDtos.length>0">
                            <div v-for="prod in item.orderItemDtos" :key="prod">
                                <view class='item-cont' @click='toOrderDetailPage(item.orderNumber)'>
                                    <view class='prod-pic'>
                                        <image :src='prod.pic'></image>
                                    </view>
                                    <view class='prod-info'>
                                        <view class='prodname'>
                                            {{prod.prodName}}
                                        </view>
                                        <view class='prod-info-cont'>{{prod.skuName}}</view>
                                        <view class='price-nums'>
                                            <text class='prodprice'>
                                                <text class='symbol'>￥</text>
                                                <text class='big-num'>{{prod.price}}</text>
                                            </text>
                                            <text class="prodcount">x{{prod.prodCount}}</text>
                                        </view>
                                    </view>
                                </view>
                            </div>
                        </div>
                        <div class='total-num'>
                            <text class="prodcount">共1件商品</text>
                            <div class='prodprice'>合计:
                                <text class='symbol'>￥</text>
                                <text class='big-num'>{{item.actualTotal}}</text>
                            </div>
                        </div>
                        <div class="prod-foot">
                            <div class="btn">
                                <text v-if="item.status==1" class="button" @click="onCancelOrder(item.orderNumber)">取消订单</text>
                                <text class="button warn" bindtap="" hover-class='none'>再次购买</text>
                                <text v-if="item.status==1" class="button warn" @click="onPayAgain(item.orderNumber)">付款</text>
                            </div>
                        </div>
                    </div>
                </div>
            </view>
        </div>
        <van-dialog v-show="flag" id="van-dialog" />
    </view>
</template>
<script>
import { mapState,mapActions } from 'vuex'
import Dialog from '@/static/dist/dialog/dialog';
export default {
    data(){
        return {
            list: [],
            current: 1,
            pages: 0,
            sts: 0,
            flag:false
        }
    },
    computed:{
        ...mapState({
            records:(state)=>state.user.records,
            payres:(state)=>state.user.payres,
        })
    },
    onLoad:function(options){
        if (options.sts) {
            this.sts=options.sts
            this.loadOrderData(this.sts)
        } else {
            this.loadOrderData(0)
        }
    },
    methods:{
        ...mapActions({
            loadOrderData:'user/loadOrderData',
            getOrderNumber:'user/getOrderNumber',
            cancleOrder:'user/cancleOrder',
            orderPay:'user/orderPay',
        }),
        onStsTap(e){
            var sts = e.currentTarget.dataset.sts;
            console.log(sts);
            this.sts=sts
            this.loadOrderData(this.sts)
        },
        toOrderDetailPage(orderNumber){
            this.getOrderNumber(orderNumber)
            wx.navigateTo({
                url: '/pages/user/order-detail/index?orderNum='+orderNumber
            })
        },
        onCancelOrder(ordernum){
            this.flag=true
            Dialog.confirm({
                message: '要取消此订单？',
            })
            .then(() => {
                console.log(ordernum);
                this.cancleOrder(ordernum).then(()=>{
                    this.loadOrderData(this.sts)
                })
            })
            .catch(() => {
                // on cancel
            })
        },
        async onPayAgain(orderNumber){
            // console.log(orderNumber);
            await this.orderPay(orderNumber)
            wx.hideLoading();
            wx.requestPayment({
                timeStamp: this.payres.timeStamp,
                nonceStr: this.payres.nonceStr,
                package: this.payres.packageValue,
                signType: this.payres.signType,
                paySign: this.payres.paySign,
                success: function() {
                    wx.navigateTo({
                        url: '/pages/basket/pay-result/index?sts=1',
                    })
                },
                fail: function(err) {
                    //console.log("支付失败");
                    wx.navigateTo({
                        url: '/pages/basket/pay-result/index?sts=0',
                    })
                }
            })
        }
    }
}
</script>
<style src='./orderList.css' scoped>

</style>
